<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/global.js"></script>
    <script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
    <style>
        .el-col {
            border-radius: 4px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%">
    <el-row :gutter="20">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="名称">
                <el-input v-model="formInline.name" placeholder="名称" clearable/>
            </el-form-item>

            <el-form-item label="种类">
                <el-select
                        v-model="formInline.typeid"
                        placeholder="请选择种类"
                        clearable
                        size="large"
                        style="width: 240px"
                >
                    <el-option
                            v-for="item in typeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="状态">
                <el-select
                        v-model="formInline.status"
                        placeholder="请选择状态"
                        clearable
                        size="large"
                        style="width: 240px"
                >
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <el-row :gutter="20" v-infinite-scroll="load" style="min-height: 100vh">
        <el-col :span="6" v-for="item in dataList" :key="item.petsid">
            <el-card>
                <img :src="item.img" alt="宠物图片" style="width: 100%; height: auto; object-fit: cover;">
                <div style="padding: 14px;">
                    <h3>{{ item.name }}</h3>
                    <p>种类：{{ item.typeName }}</p>
                    <p>状态：{{ item.status===1 ? '已领养' : '未领养' }}</p>
                    <p>介绍：{{ item.description }}</p>

                    <el-button type="primary" @click="adopt(item)">领养</el-button>
                    <el-button @click="like(item)" :disabled="item.usersid!==0" plain>
                        <el-icon :size="20" v-if="item.usersid===0" style="margin-right: 10px">
                            &#x2661;
                        </el-icon>
                        <el-icon :size="20" v-if="item.usersid!==0" style="margin-right: 10px">&#10084;</el-icon>
                        {{ item.likenum }}
                    </el-button>
                </div>
            </el-card>
        </el-col>


        <el-col v-if="noMore" :span="6">
            <el-card>
                没有更多了
            </el-card>
        </el-col>
    </el-row>
</div>
<script>
    const {createApp, ref, computed, reactive, onMounted} = Vue

    const {ElMessage} = ElementPlus
    const app = createApp({
        setup() {
            const noMore = ref(false)
            const page = ref(1)
            const limit = ref(0)
            const load = () => {
                limit.value += 10
                if (limit.value === 10 && dataList.value.length <= limit.value) {
                    noMore.value = false
                    let promise = new Promise((resolve, reject) => {
                        $.get("../pets/findAll", {usersid: globalData.getUid(),page: page.value, limit: limit.value, ...formInline}, function (res) {
                            if (res.code === 200) {
                                resolve(res.data.data);
                            } else {
                                reject(new Error('获取数据失败'));
                            }
                        });
                    });
                    promise.then((res) => {
                        dataList.value = res;
                    }).catch((err) => {
                        alert(err)
                    })
                } else if (dataList.value.length < limit.value && limit.value - dataList.value.length > 10) {
                    noMore.value = true
                } else {
                    noMore.value = false
                    let promise = new Promise((resolve, reject) => {
                        $.get("../pets/findAll", {usersid: globalData.getUid(),page: page.value, limit: limit.value, ...formInline}, function (res) {
                            if (res.code === 200) {
                                resolve(res.data.data);
                            } else {
                                reject(new Error('获取数据失败'));
                            }
                        });
                    });
                    promise.then((res) => {
                        dataList.value = res;
                    }).catch((err) => {
                        alert(err)
                    })
                }
            }
            //声明卡片数据
            const dataList = ref([])
            const formInline = reactive({
                name: '',
                typeid: 0,
                status: 2,
            })
            //声明状态的数据
            const statusList = [
                {
                    label: '请选择状态',
                    value: 2
                }, {
                    label: '已领养',
                    value: 1
                },
                {
                    label: '未领养',
                    value: 0
                }
            ]
            //声明一个分类的数据
            const typeList = ref([
                {
                    label: '请选择种类',
                    value: 0
                }
            ])
            //查询所有分类
            const getTypeData = () => {
                return new Promise((resolve, reject) => {
                    $.get("../type/findAllType", function (res) {
                        if (res.code === 200) {
                            resolve(res.data);
                        } else {
                            reject(new Error('获取数据失败'));
                        }
                    });
                });
            }
            //查询的方法
            const onSubmit = () => {
                limit.value = 0;
                noMore.value = false;
                load();
            }
            onMounted(async () => {
                try {
                    const types = await getTypeData();
                    // 更新 typeList
                    types.forEach(item => {
                        // 假设 item 有 label 和 value 两个属性
                        typeList.value.push({
                            label: item.name,
                            value: item.typeid
                        });
                    });

                    load();
                } catch (error) {
                    alert(error)
                }
            })
            //喜欢
            const like = (pet) => {
                //保存更改
                let promise = new Promise((resolve, reject) => {
                    $.post("../likes/add", {usersid: globalData.getUid(), petsid: pet.petsid}, function (res) {
                        if (res.code === 200) {
                            resolve(res);
                        } else {
                            reject(new Error('获取数据失败'));
                        }
                    });
                });
                promise.then((res) => {
                    pet.likenum++
                    pet.usersid = globalData.getUid()
                }).catch((err) => {
                    alert(err)
                })
            }

            const adopt = (pet) => {
                if (pet.status === 1){
                    ElMessage({
                        message: '该宠物已被领养，请勿重复领养。',
                        type: 'warning',
                    })
                }else{
                    //保存申请状态
                    let promise = new Promise((resolve, reject) => {
                        $.post("../adoption/add", {userid: globalData.getUid(), petsid: pet.petsid,status:1}, function (res) {
                            if (res.code === 200) {
                                resolve(res);
                            } else {
                                reject(res.msg);
                            }
                        });
                    });
                    promise.then((res) => {
                        ElMessage({
                            message: '申请成功，请等待审核。',
                            type: 'success',
                        })
                    }).catch((err) => {
                        ElMessage({
                            message: err,
                            type: 'warning',
                        })
                    })
                }
            }

            return {//返回的是一个：promise
                formInline, statusList, typeList, onSubmit, load, dataList, like, adopt,noMore
            }
        }
    })
    for ([name, comp] of Object.entries(ElementPlusIconsVue)) { //显示icon用
        app.component(name, comp);
    }
    app.use(ElementPlus)
    app.mount('#app')
</script>
</body>
</html>